<!DOCTYPE html>
<html>
<head>
    <title>弹幕鸡测试版</title>
    <meta name="viewport" content="device-width,initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="${rc.contextPath}/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="https://shark.douyucdn.cn/app/douyu/css/page/room-normal/app-all.css?nv=20171114v7.183">
    <link rel="stylesheet" type="text/css" href="https://shark.douyucdn.cn/app/douyu/css/page/room-normal/app-all2.css?nv=20171114v7.183">
    <link rel="stylesheet" type="text/css" href="https://shark.douyucdn.cn/app/douyu/css/com/app-all.css?nv=20171114v7.183">
    <script src="${rc.contextPath}/js/utils.js?v=1.1"></script>
	<style>
		html {
            overflow-x:hidden;
            background: #f8f8f8;
		}
		.chat-cont {
            overflow:auto;
            width:100%;
			height:100%;
			border:0px;
		}
        .chat-cont li.noble-chart {
            margin-left: -0px;
        }
        .chat-cont .c-list {
            position:static;
			padding:0px;
		}
        .chat-cont .c-list li.topLi {
        	position: fixed;
			z-index:10;
		}
        <#if fontSize??>
            .chat-cont .c-list{
                font-size: ${fontSize}px;
            }
            .chat-cont .c-list li{
                line-height: ${fontSize+7}px;
            }
        </#if>

	</style>
</head>

<body>

<div id="message" class="chat-cont" >
	<ul class="c-list" data-type="chat-list" id="chatmsg-ul">
		<li id="topLi" class="jschartli chartli hy-chat noble-chart topLi" style="display: none;"></li>
	</ul>
    <ul class="c-list " data-type="chat-lreloadYukariConcernist" id="concern-ul" style="display: none">
    </ul>
</div>
</body>

<script type="text/javascript">
	var guizu_pic={"1":"https://res.douyucdn.cn/resource/2017/02/28/common/65fb47009f8e29ef3f80ebb32ac3ea05.png","2":"https://res.douyucdn.cn/resource/2017/02/28/common/914cdd63edaf2193488d032edca63590.png","3":"https://res.douyucdn.cn/resource/2017/02/28/common/b511553671c24828629f5a7dfdc2c571.png","4":"https://res.douyucdn.cn/resource/2017/02/28/common/f4042fd71ce4a28bd37c8b2e4ad27688.png","5":"https://res.douyucdn.cn/resource/2017/02/28/common/e0b3d8f1eab175dba078a94378e8ef30.png","6":"https://res.douyucdn.cn/resource/2017/02/28/common/d2b17d4f239d866fc14f22eba640ed64.gif","7":"https://res.douyucdn.cn/resource/2017/09/16/common/645ae54da77dd089f4b8c22f81aaccc0.png"};
	var fans_pic=[{"bg":"https://shark.douyucdn.cn/res/main/fans_medal/c9f918d992b562379c9a59aa60abe8b5dfbd3c9f.png"},{"bg":"https://shark.douyucdn.cn/res/main/fans_medal/1f7c5c232b1ca2f1a033b32b52d95d1724dca610.png","md":"https://shark.douyucdn.cn/res/main/fans_medal/941927ca589fc18145b627dd04d2d2d308b86d0a.png"},{"bg":"https://shark.douyucdn.cn/res/main/fans_medal/10e4dc06079f8e8cfbfb633993c6cbe490016f08.png","md":"https://shark.douyucdn.cn/res/main/fans_medal/76ff97422c74cc675bea645eb80fedefd9711b5d.png"},{"bg":"https://shark.douyucdn.cn/res/main/fans_medal/88778c7b9dd9c3c0022eb4f291eca842d8808535.png","md":"https://shark.douyucdn.cn/res/main/fans_medal/e17703538fcea0c80c5c0a1cea6448cfe126be82.png"},{"bg":"https://shark.douyucdn.cn/res/main/fans_medal/e208fb62041107723265ef2445d880ceb9558de6.png","md":"https://shark.douyucdn.cn/res/main/fans_medal/7d315b51bd2774881b32c751566c5f6b6973151d.png"},{"bg":"https://shark.douyucdn.cn/res/main/fans_medal/743f3b8783a685c03b6252a34a799a84133572ad.png","md":"https://shark.douyucdn.cn/res/main/fans_medal/e1fdf70a68571e15eb194769e5d87791629785ab.png"},{"bg":"https://shark.douyucdn.cn/res/main/fans_medal/72888863cfe88d97390a86bd427b95465b07cbff.png","md":"https://shark.douyucdn.cn/res/main/fans_medal/979c5b908be3ab634a786cc4bf3af42797049ebd.png"},{"bg":"https://shark.douyucdn.cn/res/main/fans_medal/b4b50d697a800523fc6c32fcadaf1d6306a0e1c1.png","md":"https://shark.douyucdn.cn/res/main/fans_medal/fd0b2dcbb86acc19e91604bf3d422c7d7abf6469.png"}];
	var color_map={"1":"ff0000","2":"1e87f0","3":"7ac84b","4":"FF7F00","5":"9b39f4","6":"FF69B4"};
	function fansPaizi(lv){
		if (lv == 0){
			return fans_pic[0];
		} else if (lv >= 30) {
			var index = fans_pic.length-1;
			return fans_pic[index];
		} else {
			var index = parseInt((lv-1) / 5) + 1;
			return fans_pic[index];
		}
	}
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window){
        websocket = new WebSocket("wss://wsproxy.douyu.com:6673",{ headers: { Origin: 'https://www.douyu.com' } });
    }
    else{
        alert('Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function(){
        setMessageInnerHTML("error");
    };


    //连接成功建立的回调方法
    websocket.onopen = function(event){
    	if (roomId){
    		var message = {"type":"openSocket","roomId":roomId};
    		websocket.send(JSON.stringify(message));
    	}
    }
	</#if>
    
	var scrollBottomFlag = true;
    if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|SymbianOS)/i))) {
        document.getElementById("chatmsg-ul").addEventListener("touchstart",function(){scrollBottomFlag = false;});
        document.getElementById("chatmsg-ul").addEventListener("touchend",function(){scrollBottomFlag = true;});
    } else {
        document.getElementById("chatmsg-ul").addEventListener("mouseover",function(){scrollBottomFlag = false;});
        document.getElementById("chatmsg-ul").addEventListener("mouseout",function(){scrollBottomFlag = true;});
    }

    function tabChange(id){
        var showTab = document.getElementById(id);
        var tabs = showTab.parentNode.children;
        for(var i=0;i<tabs.length;i++){
            tabs[i].style.display="none";
        }
        showTab.style.display = "";
//        var showChangeKey = document.getElementById(id+"-change-key");
//        var changeKeys = showChangeKey.parentNode.children;
//        for(var i=0;i<changeKeys.length;i++){
//            changeKeys[i].classList.remove("active");
//        }
//        showChangeKey.classList.add("active");

    }


	function getTime(){
		return (new Date()).valueOf();
	}
	
	var topLiIds = new Array();
	var maxChatmsgNum = 500;
    //接收到消息的回调方法
    websocket.onmessage = function(event){
        var json = JSON.parse(event.data);
        if(json.type=="chatmsg"){
            json.data.uid = parseInt(json.data.uid);
            showChatmsg(json);
        } else if(json.type=="uenter"){
            json.data.uid = parseInt(json.data.uid);
            showUenter(json);
        } else if(json.type=="horn"){
            if (window.parent!=window){
                window.parent.showXiaoma(0,"",json.data.name,json.data.txt,"horn");
            }
        }
    }

    var yukari_concern_ids = [];


    function showUenter(json){
        var piaoping = false;
        var danmuStyle = "default";
        //关注人、伯爵以上
        if (json.data.nl){
            if (json.data.nl >= 3 && json.data.nl <= 6){
                piaoping = true;
            }
        }
        if(!piaoping){
            if (yukari_concern_ids.indexOf(json.data.uid) != -1){
                piaoping = true;
            }
        }
        if (window.parent!=window){
            if(piaoping){
                window.parent.showXiaoma(json.data.uid,"https://apic.douyucdn.cn/upload/"+json.data.ic+"_big.jpg",json.data.nn,"【进入直播间】",danmuStyle);
            }
        }
    }

    function createChatmsgLi(json,liId,txt){
        var li = document.createElement("li");
        li.classList.add("jschartli");
        li.classList.add("chartli");
        li.classList.add("hy-chat");
        li.id = liId;
        var p = document.createElement("p");
        p.classList.add("text-con");

        //房管
        if (json.data.rg == 4) {
            var span = document.createElement("span");
            span.classList.add("chat-icon-pad");
            var img = document.createElement("img")
            img.src = "https://shark.douyucdn.cn/app/douyu/res/page/room-normal/roomadmin.png?v=20170706";
            span.appendChild(img);
            p.appendChild(span);
        }
        //贵族
        if (json.data.nl){
            var nl = json.data.nl;
            var nlSrc = guizu_pic[nl];
            var span = document.createElement("span");
            span.classList.add("chat-icon-pad");
            span.classList.add("user-noble");
            var img = document.createElement("img")
            img.src = nlSrc;
            span.appendChild(img);
            p.appendChild(span);
        }
        //牌子
        if (json.data.bnn && json.data.bl){
            var lv = json.data.bl;
            var bnn = json.data.bnn;
            var imgJson = fansPaizi(lv);
            var span = document.createElement("span");
            span.classList.add("chat-icon-pad");
            var span1 = document.createElement("span");
            span1.classList.add("fans-badge-icon");
            span1.setAttribute("data-ui-level",lv);
            var span1_1 = document.createElement("span");
            span1_1.classList.add("fans-icon-name");;
            span1_1.style.backgroundImage="url("+imgJson.bg+")";
            var i = document.createElement("i");
            i.appendChild(document.createTextNode(bnn));
            span1_1.appendChild(i);
            var span1_2 = document.createElement("span");
            span1_2.classList.add("fans-badge-level");
            span1_2.style.backgroundImage="url("+imgJson.md+")";
            var span1_3 = document.createElement("span");
            span1_3.classList.add("fans-icon-level");
            span1.appendChild(span1_1);
            span1.appendChild(span1_2);
            span1.appendChild(span1_3);
            span.appendChild(span1);
            p.appendChild(span);
        }
        //等级
        var lva = document.createElement("a");
        lva.classList.add("chat-icon-pad");
        lva.classList.add("user-level");
        lva.classList.add("level-"+json.data.level);
        lva.classList.add("level-bgpng");
        lva.classList.add("level-size1");
        //名字
        var namespan = document.createElement("span");
        namespan.classList.add("name");
        var namea = document.createElement("a");
        namea.classList.add("nick","js-nick");
        namea.addEventListener("click",function(){findChatmsg(json.data.uid)});
        namea.appendChild(document.createTextNode(json.data.nn+": "));
        namespan.appendChild(namea);
        //弹幕
        var txtColor =  "ffffff"
        var txtspan = document.createElement("span");
        if (json.data.col){
            txtColor = color_map[json.data.col];
            txtspan.style.color = "#"+txtColor;
        }
        txtspan.classList.add("chat-msg-item");
        txtspan.classList.add("m");
        txtspan.innerHTML = txt;
        p.appendChild(lva);
        p.appendChild(namespan);
        p.appendChild(txtspan);
        li.appendChild(p);
        return li;
	}

	var tebieShow = [51126709];
    
    function showChatmsg(json){
    	var liId = getTime()+"_"+json.data.uid;
    	var ul = document.getElementById("chatmsg-ul");
    	var lis = ul.getElementsByTagName("li");
    	if (lis.length > maxChatmsgNum){
            ul.removeChild(lis[1]);
		}
        var piaoping = false;
    	var danmuStyle = "default";
        var txt = chatmsgReplace(json.data.txt);
        var li = createChatmsgLi(json,liId,txt);
        if (json.data.nl){
            if (json.data.nl >= 3 && json.data.nl <= 6){
                li.classList.add("noble-chart");
                topLiIds.push(liId);
                piaoping = true;
            }
		}
		if (json.data.rg == 4){
            piaoping = true;
        }
        if(!piaoping){
            if (yukari_concern_ids.indexOf(json.data.uid) != -1){
                piaoping = true;
            }
        }
        if (tebieShow.indexOf(json.data.uid) != -1){
            li.classList.add("noble-chart");
            li.style.background = "#FFC4C4";
            piaoping = true;
            danmuStyle = "guizu";
        }
        ul.appendChild(li);
    	if (scrollBottomFlag && ul.style.display != 'none'){
	    	scrollBottom();
    	}
    	window.setTimeout("showTopLi()",0);
        if (window.parent!=window){
            window.parent.showTdChatmsg(json.data.uid,txt);
            if(piaoping){
                window.parent.showXiaoma(json.data.uid,"https://apic.douyucdn.cn/upload/"+json.data.ic+"_big.jpg",json.data.nn,txt,danmuStyle);
            }
        }
    }

    function showTopLi(){
        var topLi = document.getElementById("topLi");
    	var scrollTop = document.documentElement.scrollTop;
    	if (topLiIds.length > 0){
    		if (topLi.style.display == "none"){
	    		var liId = topLiIds[0];
	    		var li = document.getElementById(liId);
	    		if (li){
                    if (scrollTop > (li.offsetTop + li.offsetHeight)){
                        topLi.innerHTML = li.innerHTML;
                        topLiIds.shift();
                        window.setTimeout("hideTopLi()",3000);
                        topLi.style.display = "";
                    }
                } else {
                    topLiIds.shift();
                }
    		}
    	}
    }
    
    function hideTopLi(){
    	var topLi = document.getElementById("topLi");
    	topLi.style.display = "none";
    	showTopLi();
    }
    
    function findChatmsg(id){
    	if(window.parent!=window){
    		window.parent.getAuthTalk(id)
    	}
    }
    
    function scrollBottom(){
    	var h = document.documentElement.scrollHeight || document.body.scrollHeight;
  		window.scrollTo(h,h);
    }

    //连接关闭的回调方法
    websocket.onclose = function(){
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function(){
        websocket.close();
    }

    //关闭连接
    function closeWebSocket(){
        websocket.close();
    }

    //发送消息
    function send(){
        var message = document.getElementById('text').value;
        websocket.send(message);
    }

    window.onload = function(){
        if (window.parent!=window){
            window.parent.reloadYukariConcern();
        }
    }



</script>
</html>